<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传文件</title>
  <script type="text/javascript" src='./xlsx.core.min.js'></script>
</head>

<!-- vue 解析 xlsx  npm install --save xlsx -->

<body>
  文件：<br>
  <input type="file" id="file"><br>
</body>
<script>
  //首先监听input框的变动，选中一个新的文件会触发change事件
  document.querySelector("#file").addEventListener("change", function () {
    //获取到选中的文件
    var file = document.querySelector("#file").files[0];
    var type = file.name.split('.');
    if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
      alert('只能选择excel文件导入');
      return false;
    }
    console.time('解析时间：')
	var fileReader = new FileReader();
	fileReader.onload = function(ev) {
		try {
			var data = ev.target.result,
				workbook = XLSX.read(data, {
					type: 'binary'
				}), // 以二进制流方式读取得到整份excel表格对象
				tbdata = {}; // 存储获取到的数据
		} catch (e) {
			console.log('文件类型不正确');
			return;
		}

		// 表格的表格范围，可用于判断表头是否数量是否正确
		var fromTo = '';
		
		// 遍历每张表读取
		for (var sheet in workbook.Sheets) {
			if (workbook.Sheets.hasOwnProperty(sheet)) {
				var datas = workbook.Sheets[sheet];
				// fromTo = datas['!ref'];
				// console.log("fromTo",sheet,fromTo);
				
				// 只列出前10条
				var copyDatas10 = {}
				a:for (var nums in datas){
					var match = nums.match(/\d+/)
					 var num = match?match[0]:nums
					 copyDatas10[nums] = datas[nums]
					 if(/\d+/.test(num) && num>10){
						 break a;
					 }
				}
				// console.log('copyDatas10',copyDatas10)
				
				// tbdata
				tbdata[sheet] = XLSX.utils.sheet_to_json(copyDatas10)
				// break; // 如果只取第一张表，就取消注释这行
			}
		}

		// console.log("workbook.Sheets",workbook.Sheets);
		console.log("tbdata",tbdata);
		
		console.timeEnd('解析时间：')
	};

	// 以二进制方式打开文件
	fileReader.readAsBinaryString(file);
  });
</script>

</html>